<template>
    <!-- 风险清单 -->
    <div class="system3"
         style="heigth:100%;font-size: 14px;">
        <div class="bscroll">
            <vue-better-scroll class="wrapper"
                               ref="scroll0"
                               :scrollbar="scrollbarObj"
                               :pullDownRefresh="pullDownRefreshObj"
                               :pullUpLoad="pullUpLoadObj"
                               :startY="parseInt(startY)"
                               @pullingDown="onPullingDown"
                               @pullingUp="onPullingUp">
                <div class="bscroll-container">
                    <ul class="header">
                        <li @click="go1">法规标准</li>
                        <li @click="go2">规章制度</li>
                        <li class="currentLi">操作规程</li>
                        <li @click="go4">事故案例</li>
                    </ul>

                    <div class="systemDiv3">

                        <div class="searchDiv1">
                            <!-- <x-input title="title"
                                        v-model="name"
                                        :show-clear="false"></x-input> -->

                            <div class="search-wrap">
                                <input type="text"
                                       v-model="OperateName"
                                       placeholder="请输入关键字查询">
                                <button @click="SearchList"></button>
                            </div>
                        </div>
                        <!-- <div class="searchDiv">
                            <input type="text" class="search" placeholder="输入关键字搜索" />
                        </div> -->
                        <noData v-if="listArr.length == 0"></noData>
                        <ul class="mainUl">
                            <li @click="getInfo(item)"
                                v-for="(item,index) in listArr"
                                :key="index">
                                <h5>操作规程名称:{{item.OperateName}}</h5>
                                <p>上传时间: {{item.CreateDate}}</p>
                                <x-icon type="ios-arrow-right"
                                        size="20"></x-icon>
                            </li>
                        </ul>
                    </div>
                </div>
            </vue-better-scroll>
        </div>
        <myMenu @clickBack="back"
                backPath="/Index/newEdit"></myMenu>
    </div>
</template>
<script>
import { Datetime, Radio } from 'vux'
import myMenu from '@/commonComponents/menu'
import VueBetterScroll from 'vue2-better-scroll'
import { GetOperateProceduresList } from '@/api/api'
export default {
    components: {
        Radio,
        myMenu,
        Datetime,
        VueBetterScroll
    },
    data () {
        return {
            list1: [],
            name1: '',
            name2: '',
            name3: '',
            parmas: {
                allowPaging: true,
                business: 'GetOperateProceduresList',
                data: {
                    OperateName: ''
                },
                pageIndex: 0,
                pageSize: 20,
                tokenId: '',
                userId: ''
            },
            listArr: [],
            nodata: true,
            OperateName: '',
            flag: false,
            // dropDown: false
            // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的
            scrollbarObj: {
                fade: true
            },
            // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）
            pullDownRefreshObj: false,
            // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机
            pullUpLoadObj: {
                threshold: 0,
                txt: {
                    more: '加载更多',
                    noMore: '没有更多数据了'
                }
            },
            startY: 0, // 纵轴方向初始化位置
            scrollToTime: 400,
            listCount: 0,
            listAllCount: 0

        }
    },
    created () {
        window.localStorage.removeItem('OperateProceduresList')
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        if (window.sessionStorage.getItem('name1')) {
            this.name1 = window.sessionStorage.getItem('name1')
            this.parmas.data.departId = window.sessionStorage.getItem('departId')
        } else {
            this.name1 = token.deptname
            this.parmas.data.departId = token.deptid
        }
        if (window.sessionStorage.getItem('name2')) {
            this.name2 = window.sessionStorage.getItem('name2')
            this.parmas.data.SourceLevel = window.sessionStorage.getItem('name2')
        }
        if (JSON.parse(window.sessionStorage.getItem('name3'))) {
            var name = JSON.parse(window.sessionStorage.getItem('name3'))
            var name3 = ''
            for (var k of name) {
                name3 += k + ','
                console.log(name3, 1990)
            }
            this.name3 = name3.substring(0, name3.length - 1)
            this.parmas.data.AccidentType = this.name3
        }
        this.$vux.loading.show({
            text: '加载中...'
        })
        this.parmas.pageIndex = 0
        this.onPullingDown()
    },
    mounted () {
        var token = JSON.parse(window.localStorage.getItem('userInfo'))
        this.parmas.userId = token.userid
        // this.dataArr();
    },
    methods: {
        back () {
            window.sessionStorage.removeItem('name1')
            window.sessionStorage.removeItem('departId')
            window.sessionStorage.removeItem('name2')
            window.sessionStorage.removeItem('name3')
        },
        go1 () {
            window.sessionStorage.clear()
            this.$router.push('./system')
        },
        go2 () {
            window.sessionStorage.clear()
            this.$router.push('./system2')
        },
        go4 () {
            window.sessionStorage.clear()
            this.$router.push('./system4')
        },
        change1 (value) {
            window.sessionStorage.setItem('time', value)
        },
        change2 (value) {
            window.sessionStorage.setItem('time', value)
        },
        dataArr () {
            this.$axiosAjax.getConfigJson(this.parmas).then(res => {
                console.log(res, 159)
                if (res.status == 200) {
                    this.listArr = res.data.data
                    this.total = res.data.count
                    if (res.data.data != null && res.data.data.length > 0) {
                        this.nodata = true
                    } else {
                        this.nodata = false
                    }
                }
            })
        },
        query () {
            this.dataArr()
        },
        getData () {
            this.parmas.data.OperateName = this.OperateName
            this.parmas.userId = this.parmas.userId
            return this.$axiosAjax.getConfigJson(this.parmas)
        },
        // getList() {

        //   this.parmas.data.OperateName=this.OperateName;
        //     this.parmas.userId=this.parmas.userId;
        //      GetOperateProceduresList(this.parmas)
        //     .then(res => {
        //        if (res.code == 0) {
        //         this.list1 = res.data;
        //         this.$vux.loading.hide();
        //       } else {
        //         this.$vux.toast.text(res.data.info);
        //       }
        //     })
        //     .catch(() => {});
        // },
        getInfo (item) {
            localStorage.setItem('OperateProceduresList', JSON.stringify(item))
            this.$router.push({ path: './system3Destail', query: { type: 2 } })
        },
        SearchList () {
            this.onPullingDown()
            //   this.getList();
        },
        // 模拟下拉刷新
        onPullingDown () {
            let that = this
            this.getData().then(res => {
                if (res.data.code === 0) {
                    that.listArr = res.data.data
                    that.listCount = that.listArr.length
                    that.listAllCount = res.data.count
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        },
        // 模拟上拉 加载更多数据
        onPullingUp () {
            let that = this
            this.param1.pageIndex++
            this.getData().then(res => {
                // console.log(res)
                if (res.data.code === 0) {
                    that.listArr = that.listArr.concat(res.data.data)
                    that.listCount = that.listArr.length
                    that.$vux.loading.hide()
                }
                if (that.listCount < that.listAllCount) {
                    that.$refs.scroll0.forceUpdate(true)
                } else {
                    that.$refs.scroll0.forceUpdate(false)
                }
            }).finally(() => {
                that.$vux.loading.hide()
            })
        }
        //   onPullingDown() {
        //   console.log("xl");
        // },
        // onPullingUp() {

        //   this.parmas.pageIndex++;
        //   GetOperateProceduresList(this.parmas)
        //     .then(res => {
        //       if (res.code === 0) {
        //         this.list1 = this.list1.concat(res.data);

        //         this.listCount = this.list1.length;
        //         this.listAllCount = res.count;
        //         if (this.listCount < this.listAllCount) {
        //           this.$refs[`scrollqq`].forceUpdate(true);
        //         } else {
        //           this.$refs[`scrollqq`].forceUpdate(false);
        //         }
        //       }
        //     })
        //     .catch(() => {
        //       console.log("error");
        //     })
        //     .finally(() => {
        //       this.$vux.loading.hide();
        //       this.flag = true;
        //     });
        // }
    }
}
</script>
<style lang="less" scope>
.bscroll {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}
.system3 {
    width: 100%;
    height: 100%;
    background-color: #ebeef3;
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        background-color: #fff;
        li {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #999;
            font-size: 16px;
        }
        .currentLi {
            width: 64px;
            line-height: 60px;
            height: 60px;
            float: left;
            margin-right: 24px;
            color: #2269ff;
            font-size: 16px;
            border-bottom: 4px solid #2269ff;
        }
    }
    .systemDiv3 {
        width: 100%;
        background-color: #fff;
        .searchDiv {
            background-color: #ebeef2;
            padding: 10px 0;
            .search {
                width: 360px;
                margin: 0 auto;
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                box-sizing: border-box;
                border-radius: 10px;
                display: block;
                border: 1px solid #999;
            }
        }
        .mainUl {
            width: 100%;
            li {
                height: 80px;
                padding: 20px 20px;
                border-bottom: 1px solid #f0eff4;
                position: relative;
                h5,
                p {
                    width: 310px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                h5 {
                    font-size: 14px;
                    color: #333;
                    font-weight: normal;
                }
                p {
                    font-size: 14px;
                    margin-top: 10px;
                    color: #999;
                }
                .vux-x-icon {
                    fill: #999;
                    float: right;
                    position: absolute;
                    width: 20px;
                    height: 20px;
                    top: 30px;
                    right: 10px;
                }
            }
        }
    }
}
.searchDiv1 {
    display: flex;
    align-items: center;
    height: 60px;
    background: #ebeef3;
    padding: 0 20px;
    overflow: hidden;
}
.search-wrap {
    display: flex;
    justify-content: center;
    height: 40px;
    margin: 10px auto;
    border-radius: 8px;
    background: #fff;
    padding: 10px 15px;
    flex: 1;
    input {
        height: 20px;
        flex: 1;
        font-size: 14px;
        color: #666;
    }
    button {
        width: 24px;
        height: 25px;
        background: url(../../../static/images/s_03.png) no-repeat center #fff;
        background-size: 24px 25px;
    }
}
</style>
